<template>
  <ul class="marketlist">
    <router-link tag="li" :to="item.path" v-for = " (item, index) of list " @click.native="classify(item)" :key = "index">
      <i :class="item.icon"></i>
      <span>{{item.name}}</span>
    </router-link>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      list: [{
        type: '3',
        name: '调味酱料',
        icon: 'iconfont icon-tiaoweiliao',
        path: '/goodslist'
      }, {
        type: '2',
        name: '厨具',
        icon: 'iconfont icon-chuju',
        path: '/goodslist'
      }, {
        type: '1',
        name: '烘焙',
        icon: 'iconfont icon-hongpei',
        path: '/goodslist'
      }, {
        type: '4',
        name: '厨房电器',
        icon: 'iconfont icon-chufangdianqi2',
        path: '/goodslist'
      }, {
        type: '5',
        name: '精选美食',
        icon: 'iconfont icon-shicai',
        path: '/goodslist'
      }]
    }
  },
  methods: {
    classify (item) {
      console.log(item.name)
      sessionStorage.setItem('title', item.name)
      sessionStorage.setItem('type', item.type)
    }
  }
}
</script>

<style lang="scss" scoped>
.marketlist{
      width:100%;
      height:0.8rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      box-sizing:border-box;
      padding:0.05rem 0.15rem 0;
      border-bottom: 1px dashed #ccc;
      li{
        height:100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        span{
          font-size:0.12rem;
        }
        i{
          font-size:0.24rem;
          color:#ffa810;
        }
      }
    }
</style>
